<template>
    <div>
        <button @click="measure('Polyline')">测量线</button>
        <button @click="measure('Polygon')">测量面</button>
        <span>---|---</span>
        <button @click="analysis('calculateAltitude')">高程分析</button>
        <button @click="analysis('calculateSlopeOrAspect')">坡度分析</button>
        <button @click="analysis('viewShed')">可视域分析</button>
        <button @click="analysis('isVisible')">通视分析</button>
        <span>---|---</span>
        <button
            @click="
                analysisService(
                    'navigationNetWork',
                    [116.24427795410156, 40.20927429199219],
                    [116.34246826171875, 39.98199462890625]
                )
            "
        >
            路径规划
        </button>
    </div>
</template>

<script>
import LinesMessage from '../test/PathNavTest'

export default {
    props: ['bindMap'],
    data() {
        return {
            Graticules: false,
            KilometerGrid: false,
        }
    },
    methods: {
        measure(type) {
            ;[window.bindMap2D, window.bindMap3D].forEach(mapVm => {
                mapVm.measure(type, {
                    linkMaps: [window.bindMap2D, window.bindMap3D],
                    repeatMode: true,
                    style: {
                        fontSize: '12px',
                    },
                })
            })
        },
        analysis(type) {
            this.bindMap.startAnalysis(type)
        },
        analysisService(type, ...rest) {
            const colors = ['red', 'yellow', 'blue']

            this.bindMap.analysisPlugin.service[type](...rest).then(data => {
                data.parts.forEach((part, i) => {
                    const points = part.geojson.coordinates

                    // 线段
                    this.bindMap.drawGraphic('Polyline', points, {
                        color: colors[i % 3],
                    })
                    // 拐点
                    this.bindMap.drawGraphic('Label', points[0], {
                        text: part.turnType,
                    })
                })
            })

            const map3d = window.bindMap3D
            LinesMessage.forEach((part, i) => {
                const points = part.geojson.coordinates

                // 线段
                map3d.drawGraphic('Polyline', points, {
                    color: colors[i % 3],
                })
                // 拐点
                map3d.drawGraphic('Label', points[0], {
                    text: part.turnType,
                })
            })
        },
    },
}
</script>
